<template>
  <!-- 巡检报告 -->
  <div class="report-box">
    <TitleBox titleName="巡检报告">
      <div class="con-box centerbox">
        <!-- 1 巡检报告展示 -->
        <div class="report-show">
          <!-- <div class="title">
            <span></span>
            <span>巡检报告展示</span>
          </div>-->
          <div class="pie-box" >
            <EasyPie2 :dataList="newReportList_dataList" @handleClick='handleClick' :sum="reportTotalNum" pieColor="#61fcfc" />
          </div>
          <div class="checked-num">
            <div class="num">
              <span>正常</span>
              <span class="pointer" @click="handleClick('zc')">{{newReportList_dataList[0].value}}</span>
            </div>
          </div>
          <div class="abnormal-num">
            <div class="num">
              <span>异常</span>
              <span class="pointer" @click="handleClick('yc')">{{newReportList_dataList[1].value}}</span>
            </div>
          </div>
        </div>
        <!-- 2 变电站概况 -->
        <div class="substation-overview">
          <!-- <div class="title">
            <span></span>
            <span>变电站概况</span>
          </div>-->
          <div class="pie-box">
            <EasyPie2 :dataList="substation_dataList"  @handleClick='handleClick'  :sum="substation_sum" pieColor="#3aed82" />
          </div>
          <div class="checked-num">
            <div class="num">
              <span>已确认</span>
              <span @click="handleClick('yqr')" class="pointer">{{substation_dataList[0].value}}</span>
            </div>
          </div>
          <div class="abnormal-num">
            <div class="num">
              <span>未确认</span>
              <span @click="handleClick('wqr')" class="pointer">{{substation_dataList[1].value}}</span>
            </div>
          </div>
        </div>
      </div>
    </TitleBox>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import TitleBox from "./TitleBox.vue";
import EasyBar from "../echa/EasyBar.vue";
import EasyPie2 from "../echa/EasyPie2.vue";
import time from "@/utils/time.js";
interface colorType {
  from: string;
  to: string;
}
@Component({
  components: {
    TitleBox,
    EasyBar,
    EasyPie2,
  },
})
export default class extends Vue {
  //  1. 巡检报告展示
  //从后台获取的数据
  private reportData = {
    sfqr: [
      {
        WQR: 9,
        YQR: 0,
      },
    ],
    sfzc: [
      {
        COUNT: 3,
        XSJG: "正常",
        XSJG_KEY: 1,
      },
      {
        COUNT: 6,
        XSJG: "异常",
        XSJG_KEY: 0,
      },
    ],
  };

  reportTotalNumList = "0";
  get reportTotalNum() {
    var reportTotalNum = this.reportTotalNumList;
    console.log(reportTotalNum);

    return reportTotalNum;
  }
  public newReportList_dataList: any = [
    { name: "正常", value: 0 },
    { name: "异常", value: 3 },
  ];
  public substation_dataList: any = [
    { name: "已确认", value: 12 },
    { name: "未确认", value: 13 },
  ];
  substation_sumLiist = "0";
  get substation_sum() {
    var substation_sum = this.substation_sumLiist;
    return substation_sum;
  }
  private init() {
    (this as any).$services
      .getXjBg({
        method: "get",
        data: {},
      })
      .then((result: any) => {
        console.log("变电站巡检报告统计展示:", result);
        this.substation_dataList[0].value = result.data.sfqr[0].YQR;
        this.substation_dataList[1].value = result.data.sfqr[0].WQR;
        this.substation_sumLiist =
          result.data.sfqr[0].YQR + result.data.sfqr[0].WQR + "";

        this.newReportList_dataList[0].value = result.data.sfzc[0].COUNT;
        this.newReportList_dataList[1].value = result.data.sfzc[1].COUNT;
        this.reportTotalNumList =
          result.data.sfzc[0].COUNT + result.data.sfzc[1].COUNT + "";
        console.log(this.substation_dataList);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  handleClick(vla) {
    console.log(vla);
    let nowTime=new Date().getTime()
    let startTime=time(nowTime- 7 * 24 * 60 * 60 * 1000)
    let endTime = time(new Date());
    var xjjg = "";
    var sfqr ='';
    switch (vla) {
      case "zc":
          xjjg = "1";
          break;
        case "yc":
          xjjg = "0";
          break;
        case "wqr":
          sfqr = "0";
          break;
        case "yqr":
          sfqr = "1";
          break;
      default:
        break;
    }
    this.$router.push({
      path: "/jointInspection/inspectionreport",
      query: {
        state:xjjg,
        xjbg:sfqr,
        startTime: startTime,
        endTime: endTime,
      },
    });
  }
  mounted() {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.report-box {
  width: 100%;
  height: 100%;
  .con-box {
    width: 100%;
    height: 100%;
    display: flex;
    place-content: center space-between;
    flex-flow: row nowrap;
    align-items: space-between;
    .report-show {
      width: 50%;
      height: 100%;
      display: flex;
      place-content: space-around space-around;
      flex-flow: column wrap;
      align-items: space-around;
      .title {
        height: 0.2rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span:first-child {
          display: inline-block;
          width: 0.05rem;
          height: 0.2rem;
          background: #61fcfc;
          margin-left: 0.2rem;
        }
        span:last-child {
          font-size: 0.18rem;
          margin-left: 0.1rem;
        }
      }
      .pie-box {
        height: 39%;
        width: 100%;
      }
      .checked-num {
        height: 0.2rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .num {
          width: 1.1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.18rem;
          span:last-child {
            color: rgba(97, 252, 252, 1);
          }
        }
      }
      .abnormal-num {
        height: 0.2rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .num {
          width: 1.1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.18rem;
          span:last-child {
            color: rgba(240, 105, 6, 1);
          }
        }
      }
    }
    .substation-overview {
      width: 50%;
      height: 100%;
      display: flex;
      place-content: space-around space-around;
      flex-flow: column wrap;
      align-items: space-around;
      .title {
        height: 0.2rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span:first-child {
          display: inline-block;
          width: 0.05rem;
          height: 0.2rem;
          background: #3aed82;
          margin-left: 0.2rem;
        }
        span:last-child {
          font-size: 0.18rem;
          margin-left: 0.1rem;
        }
      }
      .pie-box {
        height: 39%;
        width: 100%;
      }
      .checked-num {
        height: 0.2rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .num {
          width: 1.1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.18rem;
          span:last-child {
            color: rgba(58, 237, 130, 1);
          }
        }
      }
      .abnormal-num {
        height: 0.2rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .num {
          width: 1.1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.18rem;
          span:last-child {
            color: rgba(240, 105, 6, 1);
          }
        }
      }
    }
  }
  .pointer{
    cursor: pointer;
  }
}
</style>

